<template>
  <div class="Chief-Fifteen" chief-style-set>
    <Title title="快速登录"></Title>
    <div class="content-h-auto" chief-style-set>
      <div class="fastlogin-item" v-for="item in SystemList" :key="item.id" :class="item.icon" @click="JumpOtherSystem(item)">{{item.systemName}}</div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/baseTitle";
import { SysAuthSystem } from "@/api/portalChief";
export default {
  name: "Chief-Fifteen",
  components: {
    Title
  },
  data () {
    return {
      SystemList: []
    };
  },
  created () {
    SysAuthSystem().then(res => {
      if (res.status === 200) {
        this.SystemList = res.data.data.records;
      }
    });
  },
  methods: {
    JumpOtherSystem (item) {
      // let userNo = this.$store.state.user.userInfo.no;
      window.open(item.authUrl + this.$store.state.user.access_token);
    }
  }
};
</script>

<style lang='less'>
.Chief-Fifteen{
  .content-h-auto{
    display: flex;
    flex-wrap: wrap;
    padding-top: 1vh;

    .fastlogin-item{
      .color();
      height: 50%;
      max-width: 33%;
      text-align: center;
      // border-right: 1px solid #ddd;
      // border-bottom: 1px solid #ddd;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      padding: 0 .3vw 2vh .3vw;
      font-size: .9vw;
      cursor: pointer;

      // &:nth-child(3n){
      //   border-right: none;
      // }
      // &:nth-child(3) ~ .fastlogin-item{
      //   border-bottom: none;
      // }
      &.oaxtbg{
        background: url('../../../../../assets/ChiefImg/oaxtbg.png') no-repeat;
        background-position: 50% 20%;
      }
      &.jyfxxt {
        background: url('../../../../../assets/ChiefImg/jyfxxt.png') no-repeat;
        background-position: 50% 20%;
      }
      &.xmglxt{
        background: url('../../../../../assets/ChiefImg/xmglxt.png') no-repeat;
        background-position: 50% 20%;
      }
      &.yjshcbglxt{
        background: url('../../../../../assets/ChiefImg/yjshcbglxt.png') no-repeat;
        background-position: 50% 20%;
      }
      &.zcxt{
        background: url('../../../../../assets/ChiefImg/zcxt.png') no-repeat;
        background-position: 50% 20%;
      }
      &.rlxt{
        background: url('../../../../../assets/ChiefImg/rlxt.png') no-repeat;
        background-position: 50% 20%;
      }

      // &:not(:nth-child(2)) {
      //   visibility: hidden;
      // }
      // &:nth-child(2){
      //   border:none;
      // }
    }
  }
}
</style>